<template>
  <h1>待办清单</h1>
  <div class="content">
    <div class="add">
      <div class="pendingItem">待办事项</div>
      <input type="text" class="ipt" v-model="inputContent" placeholder="请输入要新建的内容" />
      <button class="btn1">新增</button>
    </div>
    <div class="itemList">
      <div class="all" active-class="toggle">全部</div>
      <div class="persistent" active-class="toggle">进行中</div>
      <div class="finished" active-class="toggle">已完成</div>
    </div>
    <hr class="line1" />
    <div></div>
    <hr />
    <div class="end">还有{{ 10 }}个任务未完成</div>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped>
  h1 {
    text-align: center;
  }
  .content {
    align-items: center;
    margin: auto;
    width: fit-content;
  }
  .add {
    display: flex;
    border: 1px solid rgb(0, 0, 0);
    border-radius: 5px;
  }

  .pendingItem {
    justify-content: center;
    display: inline-block;
    padding: 10px 35px;
    border-radius: 5px;
    font-size: 20px;
    background-color: #dfdfdf;
  }
  .ipt {
    height: 35px;
    padding: 5px 10px;
    vertical-align: baseline;
    width: 700px;
    border: 2px solid #97bbff;
    border-radius: 5px;
    font-size: 20px;
    color: #666666;
    outline: none;
  }
  .btn1 {
    width: 80px;
    background-color: #97bbff;
    border: 0px;
    border-radius: 5px;
    font-size: 18px;
    color: white;
  }
  .itemList {
    display: flex;
    margin: 10px auto;
  }
  .all {
    font-size: 18px;
    padding-right: 30px;
  }
  .persistent {
    font-size: 18px;
    padding: auto 30px;
  }
  .finished {
    font-size: 18px;
    padding-left: 30px;
  }
  .line1 {
    border: solid 1px #ddd;
  }
  .toggle {
    cursor: pointer;
  }
  .end {
    font-size: 20px;
  }
</style>
